<template>
	<view class="contain">
		<uni-nav-bar backgroundColor="#fff" statusBar="true" border="false">
			<block slot="left">
				<view class="city">
					<view class="flex_center flex_items" style="width:100%;">
						<image :src="sunSrc" mode=""></image>
						<text class="uni-nav-bar-text" style="color: #000;font-size: 16px;">13℃</text>
					</view>
				</view>
			</block>
			<block slot="default">
				<view class="center_title flex_center flex_items" style="color: #000;width: 100%;font-size: 18px;">
					<view class="bold" style="font-size: 20px;border-bottom: 4px solid #49D4FF;margin-right: 5%;">
						发现
					</view>
					<view class="flex_center flex_items" @click="editIsShow">
						<!-- <u-icon name="map" color="#000" size="20"></u-icon> -->
						<view class="">游玩</view>
					</view>
				</view>
			</block>
		</uni-nav-bar>


		<!-- 顶部图片 -->
		<view class="container">
			<!-- 景点图片部分（需自行替换图片路径） -->
			<image class="banner" src="https://xsstp.monkeysoftware.cn:443/upload/img/20250319/202503191335188303.png"
				mode="widthFix" />
			<!-- <view class="name">游客</view> -->
			<!-- 主体内容 -->
			<view class="content">
				<!-- 标题区域 -->
				<view class="flex_center flex_items">
					<view class="top_bannar">
						<image src="https://xsstp.monkeysoftware.cn:443/upload/img/20250319/202503191342003576.png">
						</image>
					</view>
					<view class="title-section" @click="goDetail">
						<view class="main-title" style="color: #fff;">西岭雪山</view>
						<view class="sub-title" style="color: #fff;">Xiling Snow Mountain</view>
						<view class="badge">国家级AAAA级景区</view>
						<!-- 描述信息 -->
						<view class="description">
							成都第一高峰·春观绿叶·夏避酷暑·秋赏红叶·冬季滑雪...
						</view>
					</view>
				</view>

				<view class="flex_between flex_items" style="border-bottom: 1px solid #c9c6c6;padding-bottom: 10rpx;">
					<!-- 地址信息 -->
					<view class="address">
						<uni-icons type="location-filled" size="16" color="#666" />
						<text>四川省成都市大邑县西岭镇</text>
					</view>

					<!-- 导航按钮 -->
					<view class="nav-btn" @click="handleNavigation">
						<uni-icons type="paperplane-filled" size="20" color="#000" />
						<text>导航</text>
					</view>
				</view>


				<!-- 商品列表 -->
				<view class="ticket-list">
					<view class="ticket-item" v-for="(ticket,index) in dayTickets" :key="index"
						@click="bookTicket(ticket)">
						<view class="left">
							<view class="flex_start flex_items" style="width: 70%;">
								<view class="tag" v-if="index==0">热门门票</view>
								<view class="title">{{ticket.Name}}</view>
								<uni-icons type="right" size="18" color="#999999" />
							</view>
							<view class="price">￥{{ ticket.ShowPrice }} <text>起</text> </view>
						</view>
						<button class="book-btn">预订</button>
					</view>
				</view>

				<!-- 热销商品 -->
				<!-- 				<view class="">
					<view class="hot-sale flex_start flex_items">
						<image src="https://xsstp.monkeysoftware.cn:443/upload/img/20250319/202503191513391768.png"
							mode="">
						</image>
						<view class="title">热销商品</view>
					</view>
					<u-tabs :list="list1" :current="tabIndex" @click="tabClick" lineColor="transparent"
						:scrollable="false"
						:activeStyle="{color: '#498FFF',fontWeight: 'bold',transform: 'scale(1.05)'}" :inactiveStyle="{color: '#000000',transform: 'scale(1)'
					}"></u-tabs>
					<u-scroll-list :indicator="false">
						<view class="shop_fa_play qxlj_back2" v-for="(item,index) in playList" :key="index">
							<image class="pic" :src="item.Img" mode=""></image>
							<view class="shop_fa_text">
								<view class="Name">{{item.Name}}</view>
								<view class="Price">{{item.Price}}起</view>
							</view>
						</view>
					</u-scroll-list>
				</view> -->

				<!-- 攻略 -->
				<view class="" style="padding: 30rpx 0;">
					<view class="hot-sale-guide flex_start flex_items">
						<image src="https://xsstp.monkeysoftware.cn:443/upload/img/20250319/202503191619106099.png"
							mode="">
						</image>
						<view class="title">欢游西岭</view>
					</view>
					<!-- 攻略列表 -->
					<view class="guide-list">
						<!-- 攻略 -->
						<view class="guide-item" v-for="(guide, index) in guides" :key="index" @click="goGY(guide)">
							<view class="guide-content-img">
								<image :src="guide.CoverImg" mode=""></image>
							</view>
							<!-- 攻略内容 -->
							<view class="guide-content">
								<view class="guide-text ellipsis-two">{{ guide.Abstract }}</view>
							</view>

							<!-- 用户信息 -->
							<view class="user-info">
								<view class="flex_start flex_items">
									<image class="user-avatar"
										src="https://xsstp.monkeysoftware.cn:443/upload/img/20250319/202503191556101843.png"
										mode="aspectFill"></image>
									<view class="">
										<view class="user-name">{{ guide.Author }}</view>
										<view class="post-date">{{ guide.AddTime }}</view>
									</view>
								</view>
								<view class="like-info">
									<u-icon name="thumb-up" color="#999" size="28"></u-icon>
									<text class="like-count">{{ guide.like }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 门票预定 -->
		<u-popup :show="visible" @close="close" @open="open" mode="bottom" class="popup_box" :round="10"
			:closeOnClickOverlay="true">
			<scroll-view class="popup-content" scroll-y="true">
				<view class="popup-description">{{itemTicket.Name}}</view>
				<view class="popup-price">￥{{itemTicket.ShowPrice}}</view>

				<block v-if="itemTicket.Substance">
					<view class="section-title">产品详情</view>
					<mp-html style="background-color: #fff;" :content="itemTicket.Substance" />
				</block>

				<block v-if="itemTicket.BookingNotice">
					<view class="section-title">购买须知</view>
					<mp-html style="background-color: #fff;" :content="itemTicket.BookingNotice" />
				</block>
			</scroll-view>
			<view class="ticket-item-btn-pupop" @click="goCreat">预订</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getGoodsList
	} from '@/api/mall.js'
	import {
		getChildren,
	} from '@/api/homePage.js';
	var amapFile = require('../../utils/amap-wx.130.js'); //引入高德地图
	import Config from '@/config/index.js';
	export default {
		data() {
			return {
				weather: '', //天气温度湿度
				sun: '', //温度
				sunTitle: '', //天气
				sunSrc: Config.imgUrl + '/Content/images/weather/晴.png', //天气图标
				tabIndex: 0,
				list1: [{
					name: '套票',
				}, {
					name: '门票',
				}, {
					name: '美食',
				}, {
					name: '酒店',
				}],
				playList: [{
						Img: 'https://xsstp.monkeysoftware.cn:443/upload/img/20250305/202503052248230714.png',
						Name: '西岭雪山一日游（五星酒店+滑雪场+索道票）',
						Price: '￥599',
					},
					{
						Img: 'https://xsstp.monkeysoftware.cn:443/upload/img/20250305/202503052248230714.png',
						Name: '西岭雪山一日游（五星酒店+滑雪场+索道票）',
						Price: '￥599',
					},
					{
						Img: 'https://xsstp.monkeysoftware.cn:443/upload/img/20250305/202503052248230714.png',
						Name: '西岭雪山一日游（五星酒店+滑雪场+索道票）',
						Price: '￥599',
					},
					{
						Img: 'https://xsstp.monkeysoftware.cn:443/upload/img/20250305/202503052248230714.png',
						Name: '西岭雪山一日游（五星酒店+滑雪场+索道票）',
						Price: '￥599',
					}
				],
				guides: [],
				dayTickets: [], //门票列表
				itemTicket: {},
				visible: false, //弹窗是否显示
			}
		},
		created() {
			let _this = this;
			_this.loadData();
			_this.getGLDate();
			var myAmapFun = new amapFile.AMapWX({
				key: Config.map_key,
			});
			myAmapFun.getWeather({
				city: "大邑",
				success: function(data) {
					console.log("数据温度", data)
					//成功回调
					_this.sun = data.liveData.temperature + '℃';
					_this.sunTitle = data.liveData.weather;
					_this.weather = data.liveData.temperature + '℃  ' + data.weather.data + ' 湿度 ' + data
						.humidity.data;
					console.log(_this.sunTitle)
					if (_this.sunTitle.includes('晴')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/晴.png"
					} else if (_this.sunTitle.includes('雨')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/雨.png"
					} else if (_this.sunTitle.includes('阴')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/阴.png"
					} else if (_this.sunTitle.includes('云')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/多云.png"
					} else if (_this.sunTitle.includes('雪')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/雪.png"
					} else if (_this.sunTitle.includes('风')) {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/风.png"
					} else {
						_this.sunSrc = Config.imgUrl + "/Content/images/weather/阴.png"
					}
					uni.setStorageSync('weather', _this.weather);
				},
				fail: function(info) {
					//失败回调
					console.log(info)
				}
			});
		},
		onLoad() {

		},
		methods: {
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			timestampToTimeYMD(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				// return Y + M + D;
				return M + D;
			},
			//获取攻略数据
			async getGLDate() {
				try {
					const Data = await getChildren({
						ArticleCategoryId: 3529,
						Size: 10000,
					})
					console.log(Data.Data)
					Data.Data.forEach(con => {
						con.AddTime = this.timestampToTimeYMD(con.AddTime);
						con.like = this.getRandomNumber(100, 2000);
					})
					this.guides = Data.Data;
					console.log(this.guides)
				} catch (e) {

				}
			},
			...mapMutations(['setGoodsInfo']),
			//预约
			goCreat() {
				this.setGoodsInfo({
					...this.itemTicket,
					Type: this.itemTicket.Type
				})
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order-online'
				})
			},
			//获取列表数据
			async loadData() {
				try {
					const {
						Data
					} = await getGoodsList({
						TypeId: 11,
						Size: 2
					})
					console.log(Data)
					this.dayTickets = Data;
				} catch (e) {

				}
			},
			open() {

			},
			close() {
				this.visible = false
				// console.log('close');
			},
			bookTicket(ticket) {
				this.visible = true;
				// 预订票的逻辑
				this.itemTicket = ticket;
			},
			goGY(item) {
				uni.navigateTo({
					url: '/pages/detail/touristDetail?id=' + item.Id
				})
			},
			editIsShow() {
				this.$emit('editIhShow')
			},
			handleNavigation() {
				uni.openLocation({
					latitude: 30.6746,
					longitude: 103.2315,
					name: '西岭雪山'
				})
			},
			tabClick(e) {
				console.log(e)
				this.tabIndex = e.index;
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/detail/touristDetail?id=4628'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	//顶部导航
	.city {
		image {
			width: 16px;
			height: 16px;
		}
	}

	/deep/ .uni-navbar--border,
	/deep/ .uni-navbar__header {
		border: none !important;
	}

	.contain {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: 180rpx;
		display: flex;
		flex-direction: column;
	}

	.container {
		position: relative;
	}

	.banner {
		width: 100%;
		height: 400rpx;
	}

	.name {
		position: absolute;
		padding: 10rpx 20rpx;
		color: #fff;
		border-radius: 8rpx;
		border: 1px solid #fff;
		top: 2%;
		right: 4%;
		font-size: 32rpx;
	}

	.content {
		padding: 30rpx;
		margin-top: -90px;
	}

	.title-section {
		width: 1px;
		flex: 1;
		// margin-bottom: 30rpx;

		.main-title {
			font-size: 42rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.sub-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.badge {
			display: inline-block;
			padding: 8rpx 32rpx;
			background: linear-gradient(#E5B816, #BF8818);
			border-radius: 24rpx;
			color: #fff;
			font-size: 24rpx;
		}
	}

	.description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		// margin-bottom: 40rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
	}

	.nav-btn {
		background-color: #F5F5F5;
		color: #000;
		padding: 8rpx 24rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);

		text {
			font-size: 28rpx;
		}
	}

	.ticket-list {
		border-bottom: 1px solid #c9c6c6;
		padding-top: 30rpx;

		.ticket-item {
			background: #fff;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.left {
				width: 78%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tag {
					display: inline-block;
					background: #ffece8;
					color: #ff5a35;
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
				}

				.title {
					font-size: 28rpx;
					color: #333;
					margin-left: 4%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.price {
					font-size: 36rpx;
					color: #ff5a35;
					font-weight: bold;

					text {
						font-size: 28rpx;
						color: #666666;
						font-weight: normal;
					}
				}
			}

			.book-btn {
				width: 20%;
				background: #ff5a35;
				color: #fff;
				font-size: 28rpx;
				padding: 0 40rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin: 0;
			}
		}
	}

	.top_bannar {
		width: 216rpx;
		height: 240rpx;
		margin-right: 4%;
		border-radius: 8%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8%;
		}

	}


	.hot-sale {
		margin-top: 3%;

		image {
			width: 40rpx;
			height: 44rpx;
		}

		.title {
			font-weight: bold;
			font-size: 36rpx;
			margin-left: 2%;
		}
	}

	//推荐商家
	/deep/ .u-scroll-list {
		padding-bottom: 0 !important;
	}

	/deep/ .u-scroll-list__scroll-view {
		margin-top: 2% !important;
		width: 100% !important;
		height: 350rpx !important;

		.shop_fa_play {
			width: 248rpx;
			height: 350rpx;
			background-color: #FFFFFF;
			box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
			flex-shrink: 0;
			margin-right: 2%;
			position: relative;
			border-radius: 16rpx;

			.shop_fa_text {
				margin-left: 10px;

				.Name {
					font-size: 16px;
					font-weight: bold;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10px;
				}

				.Subtitle {
					font-size: 14px;
					margin-top: 10px;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.Price {
					color: #FF4949;
					font-size: 28rpx;
					margin-top: 10px;
				}
			}

			.pic {
				width: 100%;
				height: 160rpx;
				border-top-right-radius: 16rpx;
				border-top-left-radius: 16rpx;
			}
		}
	}

	.hot-sale-guide {
		margin-bottom: 3%;

		image {
			width: 40rpx;
			height: 44rpx;
		}

		.title {
			font-weight: bold;
			font-size: 36rpx;
			margin-left: 2%;
		}
	}

	.guide-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

	}

	.guide-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		width: 48%;
		border-radius: 16rpx;
	}

	.guide-content-img {
		width: 100%;
		height: 460rpx;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
			border-top-right-radius: 16rpx;
			border-top-left-radius: 16rpx;
		}
	}

	.guide-content {
		margin-bottom: 24rpx;
		padding: 0 2%;
		margin-top: 12rpx;

		.guide-text {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 2%;

		.user-avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.user-name {
			font-size: 26rpx;
			color: #333;
		}

		.post-date {
			font-size: 24rpx;
			color: #999;
			margin-right: auto;
		}

		.like-info {
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			.like-count {
				font-size: 24rpx;
				color: #999;
				margin-left: 8rpx;
			}
		}
	}


	.popup-content {
		padding: 4%;
		height: 65vh;

		.section-title {
			font-weight: bold;
			margin-top: 10px;
			font-size: 16px;
		}

		.popup-description {
			font-size: 16px;
			margin: 10px 0;
		}

		.popup-price {
			font-size: 18px;
			color: #498FFF;
		}
	}

	.ticket-item-btn-pupop {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 2px;
		background: linear-gradient(90deg, #80B4FF, #6699FF);
		color: white;
		// position: fixed;
		// bottom: 0;
	}
</style>